<template>
    <div class="banners">
        <el-input v-model="input1" placeholder="提示信息" class="inputs" />
        <el-input v-model="input2" placeholder="链接地址" class="inputs" />
        <el-upload
        :limit="1"
        :auto-upload="false"
        list-type="picture"
        :on-change="onChange"
      >
        <template #trigger>
          <el-button type="primary">选择文件</el-button>
        </template>
      </el-upload>
        <el-button type="primary" @click="postData" size="small" class="btns">添加</el-button>
    </div>

</template>

<script>
    import {
        ElMessage 
    } from 'element-plus'
    import {
        postBanner
    } from '../api/banner.js'
    export default {
        data() {
            return {
                input1: '',
                input2: '',
                input3: ''
            }
        },
        watch:{
            input3(n){
                this.onChange(n);
            }
        },
        methods: {
            postData() {
                console.log(this.input3);
                postBanner(this.input1,this.input2,this.input3).then(res=>{
                    ElMessage({
                        type:'success',
                        message:'添加成功'
                    })
                })
            },
            onChange(file) {
                const fileReader = new FileReader()
                console.log(file);
                fileReader.onload = () => {
                    // 将 base64 字符串，赋值给 input3
                    this.input3 = fileReader.result
                    console.log(this.input3);
                }
                fileReader.readAsDataURL(file.raw)
            }
        }
    }
</script>

<style scoped>
    .banners {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 400px;
    }

    .btns {
        width: 50px;
    }
</style>